<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
     

      <el-form-item label="父级菜单" prop="pid">
      <el-select v-model="ruleForm.pid" placeholder="请选择父级菜单">
        <el-option v-for="item in menuName" :label="item.menuName" :value="item.menuId" />
        
      </el-select>
    </el-form-item>

    <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="ruleForm.menuName" />
      </el-form-item>

      <el-form-item label="跳转路由" prop="url">
        <el-input v-model="ruleForm.url" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted} from 'vue'
  import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  import {useRouter,useRoute} from 'vue-router'
import {useCounterStore} from '@/stores/counter'

let router=useRouter();
let Store=useCounterStore();
  interface RuleForm {
    pid: string
    menuName: string
    url: string
    createPeople:string

  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    pid: "",
    menuName: '',
    url: '',
    createPeople:Store.CurrLoginUser.UserName
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    pid: [
      { required: true, message: '请选择父级菜单', trigger: 'blur' },
    ],
    menuName: [
      { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
    url: [
      { required: true, message: '请输入跳转路由', trigger: 'blur' },
    ],

  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        axios({
            url:'http://localhost:5272/api/Menu/AddMenu',
            method:'post',
            data:ruleForm
        })
        .then(res=>{
            if(res.data.code==101){
                ElMessage.success("新增成功");
                router.push("/MenuList")
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
        
      } else {
        console.log('error submit!', fields)
      }
    })
  }


onMounted(()=>{
    getMenuName();
})

const getMenuName=()=>{
    axios({
        url:'http://localhost:5284/api/Menu/QueryMenuName',
        method:'get',
    })
    .then(res=>{
        if(res.data.code==101){
            menuName.value=res.data.list
        }
    })
}

const menuName=ref([])

  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
  